{extend name="personal/index" /}

  {block name="center"}
  <link rel="stylesheet" type="text/css" href="static/css/personal_ziliao/common.css" />
  <link rel="stylesheet" type="text/css" href="static/css/personal_ziliao/jquery-ui.css" />
  <link rel="stylesheet" type="text/css" href="static/css/personal_ziliao/ui-dialog.css" />
  <link rel="stylesheet" type="text/css" href="static/css/personal_ziliao/userInfo.css" />




    <div class="personal-main userInfo fr" style="width:780px">
     <!-- 个人资料 start -->
     <div class="personal-module">
      <div class="ps-md-hd clearfix">
       <h6 class="ps-md-hd-tit fl">个人资料</h6>
      </div>
      <div class="ps-md-bd">
       <!-- 基本资料 start -->
       <div class="ui-tab">
        <div class="ui-tab-head">
         <div class="ui-tab-ctrl fl">
          <a href="indexPersonalZiliaoIndex" class="ui-tab-btn ui-tab-cur">基本资料</a>
          <a href="indexPersonalZiliaoPhoto" class="ui-tab-btn">修改头像</a>
          <a href="indexPersonalZiliaoPassword" class="ui-tab-btn">修改密码</a>
          <a href="indexPersonalZiliaoMibao" class="ui-tab-btn ">密保问题</a>
         </div>
        </div>
        <div class="ui-tab-body">
         <div class="ui-tab-section basicInfo clearfix">
          <form action="indexPersonalZiliaoEdit" method="post" name="userInfoForm" class="J-userInfoForm" novalidate="novalidate">
           <input type="hidden" id="uniq" name="id" value="{$list['id']}" />
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             <em class="color-orange">* </em>昵称：
            </div>
            <div class="basicInfo-cell fl">
             <input type="text" value="{$list['nickname']}" name="nickname" class="input basicInfo-userName fl" />
             <p class="form-error fl"></p>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             <em class="color-orange">* </em>性别：
            </div>
            <div class="basicInfo-cell fl">
             <div class="basicInfo-sex fl">
              <input type="radio" value="1" name="sex" id="sex-1" class="radio" {if condition="$list['sex'] eq '1'"}checked{/if} />
              <label for="sex-1">男</label>
             </div>
             <div class="basicInfo-sex fl">
              <input type="radio" name="sex" value="2" id="sex-2" class="radio" {if condition="$list['sex'] eq '2'"}checked{/if} />
              <label for="sex-2">女</label>
             </div>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             生日：
            </div>
            <div class="basicInfo-cell fl">
             <span class="basicInfo-birthdayBox"><input type="date" name="birthday" class="input basicInfo-birthday J-birthday" value="{$list['birthday']}" /><i class="icon-data"></i></span>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             <i class="icon-mail"></i>邮箱：
            </div>
            <div class="basicInfo-cell fl">
             <!-- <input type="email" value="{$list['email']}" name="email" class="input basicInfo-userName fl" /> -->
              <p>
                {empty name="$list['email']"}
                  <em class="color-orange">未验证邮箱</em>&nbsp&nbsp
                  <a href="indexPersonalZiliaoEmail" class="color-blue" target="_blank">验证邮箱</a>
                {else /}
                  <p>{$list['email']}
                {if condition="$list.email_status==0 "}
                  <span class="color-gray-light">（<em class="color-orange">未验证</em>）</span>
                  <a href="indexPersonalZiliaoEmail" class="color-blue" target="_blank">验证邮箱</a></p>
                {else /}
                  <span class="color-gray-light">（<em class="color-green">已验证</em>）</span>
                  <a href="indexPersonalZiliaoEmail" class="color-blue" target="_blank">更换邮箱</a></p>
                {/if}
                  
                {/empty}
                
              </p>
             <p class="form-error fl"></p>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             <i class="icon-phone"></i>手机：
            </div>
            <div class="basicInfo-cell fl">
             <p>{$list['tel']}<span class="color-gray-light">（<em class="color-green">已验证</em>）</span><a href="" class="color-blue" target="_blank">更改手机</a></p>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             城市：
            </div>
            <div class="address-form-cell fl">
             <select id="pro" name="pro"></select>
             <select id="city" name="city"></select>
             <select id="area" name="area"></select>
             <select id="street" name="street"></select>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             职业：
            </div>
            <div class="basicInfo-cell fl">
             <select name="work" id="select4" class="select basicInfo-career fl"><option value="请选择职业">请选择职业</option><option value="计算机硬件">计算机硬件</option><option value="计算机软件">计算机软件</option><option value="IT-管理">IT-管理</option><option value="IT-品管、技术支持及其它">IT-品管、技术支持及其它</option><option value="通信技术">通信技术</option><option value="电子、电器、半导体、仪器仪表">电子、电器、半导体、仪器仪表</option><option value="销售管理">销售管理</option><option value="销售人员">销售人员</option><option value="销售行政及商务">销售行政及商务</option><option value="客服及技术支持">客服及技术支持</option><option value="财务、审计、税务">财务、审计、税务</option><option value="证券、金融、投资">证券、金融、投资</option><option value="银行">银行</option><option value="保险">保险</option><option value="生产、营运">生产、营运</option><option value="质量、安全管理">质量、安全管理</option><option value="工程、机械、能源">工程、机械、能源</option><option value="汽车">汽车</option><option value="技工">技工</option><option value="服装、纺织、皮革">服装、纺织、皮革</option><option value="采购">采购</option><option value="贸易">贸易</option><option value="物流、仓储">物流、仓储</option><option value="生物、制药、医疗器械">生物、制药、医疗器械</option><option value="化工">化工</option><option value="医院、医疗、护理">医院、医疗、护理</option><option value="广告">广告</option><option value="公关、媒介">公关、媒介</option><option value="市场、营销">市场、营销</option><option value="影视、媒体">影视、媒体</option><option value="写作、出版、印刷">写作、出版、印刷</option><option value="艺术、设计">艺术、设计</option><option value="建筑工程">建筑工程</option><option value="房地产">房地产</option><option value="物业管理">物业管理</option><option value="人力资源">人力资源</option><option value="高级管理">高级管理</option><option value="行政、后勤">行政、后勤</option><option value="咨询、顾问">咨询、顾问</option><option value="律师、法务">律师、法务</option><option value="教师">教师</option><option value="科研人员">科研人员</option><option value="餐饮、娱乐">餐饮、娱乐</option><option value="酒店、旅游">酒店、旅游</option><option value="美容、健身">美容、健身</option><option value="百货、连锁、零售服务">百货、连锁、零售服务</option><option value="交通运输服务">交通运输服务</option><option value="保安、家政、其他服务">保安、家政、其他服务</option><option value="公务员">公务员</option><option value="翻译">翻译</option><option value="在校学生">在校学生</option><option value="储备干部、培训生、实习生">储备干部、培训生、实习生</option><option value="兼职">兼职</option><option value="其他">其他</option></select>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             QQ：
            </div>
            <div class="basicInfo-cell fl">
             <input type="text" value="{$list['qq']}" name="qq" class="input basicInfo-qq fl" />
             <p class="form-error fl"></p>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             论坛签名：
            </div>
            <div class="basicInfo-cell fl">
             <textarea name="sightml" id="" class="textarea basicInfo-signature">{$list['sightml']}</textarea>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             喜欢的宠物种类：
            </div>
            <div class="basicInfo-cell fl">
             <div class="choose-pet-list fl J-choosePet-list">
              <input type="hidden" name="lovepet" class="J-lovepet" value="" />
             </div>
             <a href="javascript:void(0);" class="button-dark-medium darkBtn fl J-add-pets">添加宠物</a>
             <span class="color-gray-light fl">（最多可添加5个标签）</span>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             您感兴趣的：
            </div>
            <div class="basicInfo-cell fl">
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="1" id="inerest-1" class="checkbox" />
              <label for="inerest-1">结识更多的宠友</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="2" id="inerest-2" class="checkbox" />
              <label for="inerest-2">记录爱宠的成长</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="3" id="inerest-3" class="checkbox" />
              <label for="inerest-3">学习、分享养护知识</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="4" id="inerest-4" class="checkbox" />
              <label for="inerest-4">学习、分享宠物训练的方法</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="5" id="inerest-5" class="checkbox" />
              <label for="inerest-5">在线问诊，得到宠物医院的帮助</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="6" id="inerest-6" class="checkbox" />
              <label for="inerest-6">更丰富的宠物用品</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="7" id="inerest-7" class="checkbox" />
              <label for="inerest-7">线下宠友交流活动</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="8" id="inerest-8" class="checkbox" />
              <label for="inerest-8">领养或转让宠物</label>
             </div>
             <div class="basicInfo-interest fl">
              <input type="checkbox" name="interested[]" value="9" id="inerest-9" class="checkbox" />
              <label for="inerest-9">宠物爆照、趣味分享</label>
             </div>
            </div>
           </div>
           <div class="basicInfo-row clearfix">
            <div class="basicInfo-type fl">
             &nbsp;
            </div>
            <div class="basicInfo-cell fl">
             <span class="button-light-medium submitBtn">提交<button type="submit"></button></span>
            </div>
           </div>
          </form>
         </div>
        </div>
       </div>
       <!-- 基本资料 end -->
      </div>
     </div>
     <!-- 个人资料 end -->
    </div>
    



  <!-- 职业默认选中 -->
    <script>
        $("#select4 option[value={$list['work']}]").attr('selected',true);
    </script>

    <!-- js-地址联动 -->
    <script>
        //获取省份信息
        $.ajax({
            type: 'get',
            url: "indexPersonalZiliaoAddress",
            dataType:'json',
            async: false,//同步
            success: function(data){
                //先清空之前的信息
                $('#pro').empty();
                //遍历省份信息
                for (var i = 0; i < data['data'].length; i++) {
                    $('<option value="'+data['data'][i].id+'">'+data['data'][i].name+'</option>').appendTo('#pro');
                };
            }
        });


        //绑定change事件
        $('#pro,#city,#area').change(function(){
            //先清空之前的信息
            $(this).nextAll('select').show().empty();

            //获取当前的upid的值
            var upid = $(this).val();
            // console.log(upid);
            // 保留$(this) 变量
            var _this = $(this);
            // console.log($(this));

            //请求下一级数据
            $.ajax({
                type:'get',
                url:"indexPersonalZiliaoAddress",
                data: 'upid='+upid,
                dataType:'json',
                success:function(data){
                    //如果下一级没有数据,返回false,硬挨隐藏多余的下拉框
                    if (!data['data'].length) {
                        _this.nextAll('select').hide();
                        return;
                    }

                    // 下一级数据填充
                    for (var i = 0; i < data['data'].length; i++) {
                        $('<option value="'+data['data'][i].id+'">'+data['data'][i].name+'</option>').appendTo(_this.next('select'));
                    }
                    //自动触发后面select 的 change事件
                    _this.next('select').trigger('change');
                }
            });

        })


        //自动触发 #pro 的change事件
        $('#pro').trigger('change');

    </script>
    <!-- js-地址联动结束 -->



  {/block}